<template>
  <div :id="controlid" style="display: flex;"></div>
</template>
<script>
import Vue from 'vue'
export default {
  props: ['htmlcode'],
  data() {
    return {
      controlid: '',
      newhtmlid: ''
    }
  },
  methods: {
    newVue(html) {
      const $previewApp = document.getElementById(this.controlid)
      $previewApp.innerHTML = `<div id="${this.newhtmlid}" ></div>`
      const main = {}
      main.template = `<div>${html}</div>`
      return new Vue({
        components: {
          child: main
        },
        data() {
          return {
            visible: true
          }
        },
        template: '<div style="width: 100%;"><child /></div>'
      })
    }
  },
  created() {
    this.controlid =
      'div' + Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
    this.newhtmlid =
      'div' + Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
  },
  mounted() {
    this.newVue(this.htmlcode).$mount('#' + this.newhtmlid)
  },
  watch: {
    htmlcode(newhtmlcode) {
      this.newVue(newhtmlcode).$mount('#' + this.newhtmlid)
    }
  }
}
</script>
